import PicTagImgSprite from "./Widget/PicTagImgSprite";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Middle extends cc.Component {

    @property(cc.Prefab)
    imageSpritePrefab: cc.Prefab = null;

    @property(cc.Slider)
    zoomSlider: cc.Slider = null;

    @property(cc.ScrollView)
    imageScroll: cc.ScrollView = null;

    imgWidth = 0;

    imgUrls = <string[]>[];

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        electron.ipcRenderer.on('img:load', (_e, url) => {
            this.imgUrls.push(url);
        });

        electron.ipcRenderer.send('img:dir', "C:/Users/shao/Pictures/Lain/", 100);

        this.schedule(() => {
            if (this.imgUrls.length !== 0) {
                let url = this.imgUrls.pop();
                let node = cc.instantiate(this.imageSpritePrefab);
                let imgSprite = node.getComponent(PicTagImgSprite);
                imgSprite.imgUrl = url;
                imgSprite.parent = this;
                this.node.addChild(node);
            }
        }, 0.1);
    }

    start() {

    }

    update(dt) {
        const start = 1 / 50;
        const end = 1 / 1;
        let rate = (start + this.zoomSlider.progress * (end - start));
        this.imgWidth = rate * this.node.width;
        // this.gridLayout.spacingX = 25 * rate;
        // this.gridLayout.spacingY = this.gridLayout.spacingX;

        // this.gridLayout.paddingLeft
        //     = this.gridLayout.paddingRight
        //     = (this.node.width % (this.imgWidth + this.gridLayout.spacingX)) / 2;
    }
}
